<template>
  <div>
    <div class="py-2 d-flex align-items-center">
      <el-button type="primary" size="mini" @click="createTop"
        >创建顶级分类</el-button
      >
    </div>
    <el-tree
      :data="data"
      default-expand-all
      :expand-on-click-node="false"
      draggable
      @node-drop="nodeDrop"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <div>
          <el-input v-if="data.editStatus" v-model="data.label"></el-input>
          <span v-else>{{ node.label }}</span>
        </div>
        <span>
          <el-button
            :type="data.status ? 'primary' : 'danger'"
            size="mini"
            plain
            @click.stop="showOrHide(data)"
          >
            {{ data.status ? "显示" : "隐藏" }}
          </el-button>
          <el-button type="success" size="mini" @click="append(data)"
            >增加</el-button
          >
          <el-button
            :type="data.editStatus ? 'default' : 'warning'"
            size="mini"
            @click="data.editStatus = !data.editStatus"
            >{{ data.editStatus ? "完成" : "修改" }}</el-button
          >
          <el-button type="danger" size="mini" @click="remove(node, data)"
            >删除</el-button
          >
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        status: 1,
        editStatus: false,
        children: [
          {
            id: 2,
            label: "二级 1-1",
            status: 1,
            editStatus: false,
            children: [
              {
                id: 3,
                label: "三级 1-1-1",
                status: 1,
                editStatus: false,
              },
              {
                id: 4,
                label: "三级 1-1-2",
                status: 1,
                editStatus: false,
              },
            ],
          },
        ],
      },
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),
    };
  },
  components: {},
  props: {},
  created() {},
  computed: {},
  watch: {},
  methods: {
    showOrHide(data) {
      data.status = data.status ? 0 : 1;
    },
    remove(node, data) {
      this.$confirm("确认是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //   定位到点击所在的同一级的所有节点
          let parent = node.parent;
          let children = parent.data.children || parent.data;
          let index = children.findIndex((v) => v.id === data.id);
          children.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    append(data) {
      if (data.children) {
        let obj = {
          id: 1,
          label: "一级 1",
          status: 1,
          editStatus: false,
          children: [],
        };
        data.children.push(obj);
      }
    },
    // 拖曳的结果
    nodeDrop(...options) {
      console.log(options);
    },
    // 创建顶级分类
    createTop() {
      this.$prompt("请输入顶级分类", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: (val) => {
          if (val === "" || val === null) {
            return "顶级分类不能为空";
          }
          return true;
        },
      })
        .then(({ value }) => {
          console.log(value);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
/deep/.el-tree-node__content {
  padding: 20px;
}
</style>

